<style lang="scss">
.header {
	height: var(--status-bar-height);
}
.swiper {
	height: 400rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.list {
	.list-item {
		display: flex;
		border: 1px solid #ccc;
		padding: 10rpx;
		image {
			width: 240rpx;
			height: 160rpx;
			flex-shrink: 0;
			
		}
	}
}
</style>


<template>
	<view>
		<!--  -->
		<view class="header">
			
		</view>
		<!-- 搜索 -->
		<uni-search-bar placeholder="请搜索关键字"></uni-search-bar>
		<!-- 轮播 -->
		<swiper class="swiper" indicator-dots circular autoplay :interval="5000">
			<swiper-item v-for="(item, index) in bannerData" :key="index">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- 列表 -->
		<view class="list">
			<view class="list-item"  v-for="item in listData" :key="item.id" @click="toDetail(item)">
				<image :src="item.image" mode="" ></image>
				<view class="right">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	const bannerData = ref([
		"../../static/images/banner1.webp",
		"../../static/images/banner2.webp",
		"../../static/images/banner3.webp",
		"../../static/images/banner4.webp",
	])
	const listData = ref([]);
	const _page = ref(1)
	const getListData = (callback) => {
		// http://localhost:3000/list
		uni.request({
			url: 'http://localhost:3000/list',
			data: {
				_page: _page.value
			}
		}).then((resp) => {
			console.log(resp.data)
			// 保存数据（累加 不是 重置）
			listData.value = [...listData.value, ...resp.data]
			// 判断是否存在回调函数
			callback && callback()
		})
	}
	
	const toDetail = (item) => {
		// 进入详情
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item.id}&title=${item.title}&image=${item.image}&desc=${item.desc}`
		})
	}
	
	getListData()
		
	// 上拉加载更多
	onReachBottom(() => {
		// 页码+1
		_page.value++
		// 重新请求数据
		getListData()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		// 下拉刷新 
		// 1. 清空数据
		listData.value = []
		// 2. 页码从第一个开始
		_page.value = 1
		// 3. 原来的数据不要了， 
		getListData(() => {
			// 结束下拉刷新
			uni.stopPullDownRefresh()
		});
	})
</script>

